<template>
    <MoniterItem title="重点场所监控">
        <template #right>
            <div>重点场所监控▲</div>
        </template>
        <template #content>
            <div class="main">
                <div class="left">
                    <video id="videoBox-1" ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"
                           controls data-setup="{}" height="100%"
                           playsinline preload="none" style="height: 100%; width: 100%" width="100%"></video>
                </div>
                <div class="right">
                    <div
                        v-for="(item, index) in tableData"
                        :key="index"
                        :class="{ itemActive: item.clicked }"
                        @click="changeGroup(item)"
                    >
                        {{ item.groupName }}
                    </div>
                </div>
            </div>
        </template>
    </MoniterItem>
</template>

<script>
import MoniterItem from "@/components/MoniterItem.vue";
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls.js";
import request from "../../utils/request.js";
import {nextTick, reactive} from "vue";

export default {
    name: "VideoPanel",
    data() {
        return {
            videoPlayer: null,
            timer: null,//定时器
            videoIndex: 0,// 当前播放地址index
            tableData: [],// 视频分类数据分组
            videoUrls: []// 视频地址组
        }
    },

    mounted() {
        this.initPlayer();
        this.loadDevices();
    },

    methods: {
        //初始化播放器组
        initPlayer() {
            this.videoPlayer = videojs(this.$refs.videoPlayer, {
                liveui: true,
                fluid: true, // 扩展以适应其容器的大小
                bigPlayButton: true, // 是否在暂停时显示大的播放按钮，按钮一般默认在左上角
                textTrackDisplay: true,
                posterImage: false, // 是否使用视频的缩略图
                errorDisplay: false,
                controls: true,
                autoplay: true,
                muted: true, //如果为false,视频不会自动播放，这是为了避免噪声扰民
                html5: {
                    hlsjsConfig: {
                        debug: false,
                    },
                },
            }, function () {
                console.log('视频播放器已就绪');
            })
        },

        loadDevices() {
            let me = this;
            request().get("/api/camera/firstScreenDevices")
                .then((res) => {
                    res.data.data.forEach((item, index) => {
                        item.clicked = (index === 0)
                        me.tableData.push(item);
                    });
                })
        },

        changeGroup(item) {
            console.log(item)
        }
    }
}
</script>

<style lang="less" scoped>
.main {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left {
        flex: 2;
        padding: 2%;
    }

    .right {
        padding: 2% 2% 2% 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        div {
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 18px;
            color: #1acfff;
            background-color: #1e89d3;
        }
    }
}

.itemActive {
    color: white !important;
    background-color: #1e89d3;
}
</style>